import MainLayout from "@/components/Layout";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { AppContainer, Button, Col, Row } from "knowdesign";
import { useState } from "react";
import DataSync from "./components/DataSync";
import SyncDetail from "./components/SyncDetail";
import TaskList from "./components/TaskList";

const Index = () => {
  const [detail, setDetail] = useState(false);

  return (
    <>
      {detail ? (
        <MainLayout>
          <SyncDetail setDetail={setDetail} />
        </MainLayout>
      ) : (
        <MainLayout>
          <Row style={{ marginTop: 8 }}>
            <Col
              span={3}
              style={{
                display: "flex",
                alignItems: "center",
                fontWeight: 600,
              }}
            >
              创建同步任务
            </Col>
            <Col span={21}>
              <DataSync setDetail={setDetail} />
            </Col>
          </Row>

          {/* 任务列表 */}
          <div>
            <TaskList />
          </div>
        </MainLayout>
      )}
    </>
  );
};

export default Index;
